<template>
  <div class="app">
    <!-- 顶部导航栏 -->
    <div class="top-header">
      <div class="header-content">
        <div class="logo">
          <h1>收容所代币分析</h1>
        </div>
        <div class="nav-tabs">
          <div class="nav-tab active">代币持有者列表</div>
          <div class="nav-tab">关联地址列表</div>
          <div class="nav-tab">钱包代币列表</div>
          <div class="nav-tab">合约列表</div>
        </div>
      </div>
    </div>
    
    <div class="container">
      <SearchForm @search="handleSearch" :isLoading="isLoading" />
      
      <TokenHolders 
        v-if="contractAddress"
        :contractAddress="contractAddress" 
        :isLoading="isLoading"
        @loading-change="setLoading"
      />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import SearchForm from './components/SearchForm.vue'
import TokenHolders from './components/TokenHolders.vue'

// Reactive data
const contractAddress = ref('')
const isLoading = ref(false)

// Methods
const handleSearch = (address) => {
  contractAddress.value = address
}

const setLoading = (loading) => {
  isLoading.value = loading
}
</script>
